<template>
    <div>
        <h1>图床系统</h1>
        <div>
            <div style="padding-bottom: 10px">
                <el-button type="primary" @click="()=>{triggerModify()}">添加</el-button>
            </div>
            <div style="display:flex;">
                <el-input v-model="filter.keyword" placeholder="请输入图片名称" style="width:320px;"></el-input>
                <el-button @click="()=>{filter.pageNum=0;lists=[];ajaxList();}">搜索</el-button>
            </div>

            <section style="padding-top: 20px;padding-bottom: 20px;">
                <ul style="display: flex;list-style: none;">
                    <li v-for="item in lists " :key="item.id" style="padding-right: 40px;padding-bottom: 20px;">
                        <el-image lazy
                                  :preview-src-list="[item.absolutPath]"
                                  :src="item.absolutPath" style="width:100px;height: 100px;" fit="contain"></el-image>
                        <div>
                            <span
                                    @click="()=>{copytext(item)}"
                                    style="overflow: hidden; width: 120px;
text-overflow:ellipsis;display: inline-block;cursor: pointer;
white-space: nowrap;">{{item.name}}</span>
                            <el-popconfirm
                                    title="确定？"
                                    @confirm="()=>deleteOne(item.id)"
                            >
                                <div slot="reference" style="display:inline-block">
                                    <i circle class="el-icon-delete" style="cursor: pointer;"></i>
                                </div>

                            </el-popconfirm>


                        </div>
                    </li>
                </ul>
            </section>
        </div>
        <el-pagination
                style="padding: 20px;"
                :page-size="filter.pageSize"
                layout="prev, pager, next"
                :total="filter.total"
                @size-change="(pageSize)=>{$data.filter.pageSize=pageSize;lists=[];ajaxList();}"
                @current-change="(pageNum)=>{$data.filter.pageNum=pageNum;lists=[];ajaxList();}"
        >
        </el-pagination>

        <modify ref="modifyDialog" @refresh="()=>ajaxList()"></modify>
    </div>
</template>
<script>
    import {copy2bang} from "../../utils/utils";
    import myalert from "../../utils/myalert";

    export default {
        components: {
            modify: () => import('./modify')
        },
        data() {
            return {
                filter: {
                    keyword: "",
                    pageNum: 0,
                    pageSize: 10,
                    total: 0,
                },
                lists: [],
                selectRows: [],
                showModify: false,
            }
        },
        mounted() {
            this.ajaxList();
        },
        methods: {
            copytext(item) {
                console.log(item)
                copy2bang(item.absolutPath)
                myalert.success("复制成功   " + item.absolutPath)
            },
            async deleteOne(id) {
                var result = await axios.get('/springboot6379/imageList/delete?id=' + id).then(res => res.data).then(res => res.result)
                this.ajaxList();
            },
            triggerModify() {
                this.$refs['modifyDialog'].init()
            },
            async ajaxList() {
                var _params = {
                    keyword: this.filter.keyword
                }
                console.log("[get]  /springboot6379/imageList/page")
                console.log('参数', JSON.stringify(_params))
                var result = await axios.get('/springboot6379/imageList/page?pageNum=' + this.filter.pageNum + '&&pageSize=' + this.filter.pageSize + '', {
                    params: _params
                }).then(res => res.data).then(res => res.result)
                console.log("结果", result)
                this.lists = result.records
                this.filter.total = Number(result.total)
                this.filter.pageSize = Number(result.size)
            }
        }
    }
</script>